<template>
  <div class="param-item-container">
    <!-- 循环渲染单值参数（基础参数/计算参数） -->
    <el-form-item 
      v-for="param in paramItems" 
      :key="param.paramId" 
      :label="getParamLabel(param)"
      :prop="param.paramCode"
      :rules="getParamRules(param)"
      class="single-param-item"
    >
      <!-- 动态渲染 ElementUI 组件 -->
      <component 
        :is="getElComponent(param.dataType, param.paramType)"
        :value="formData[param.paramCode]"
        v-bind="getComponentProps(param)"
        :disabled="param.paramType === 'calculation'"
        @input="handleInput(param, $event)"
        @change="handleChange(param, $event)"
      >
        <!-- 下拉选项（修正 v-for 与 v-if 共存问题） -->
        <template v-if="param.dataType === 'select' && param.options && param.options.length > 0">
          <el-option 
            v-for="opt in param.options" 
            :key="opt.value" 
            :label="opt.label" 
            :value="opt.value"
          ></el-option>
        </template>

        <!-- 日期选择框：修正 v-slot 语法 -->
        <template #default="scope" v-if="param.dataType === 'date'">
          {{ scope.date ? scope.date.format('yyyy-MM-dd') : '' }}
        </template>
      </component>

      <!-- 计算参数提示图标 -->
      <el-tooltip 
        v-if="param.paramType === 'calculation'"
        content="计算参数：依赖基础参数自动更新"
        placement="top"
        effect="light"
      >
        <i class="el-icon-info-outline calc-param-tip"></i>
      </el-tooltip>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'ParamItemRenderer',
  props: {
    // 传入的单值参数列表
    paramItems: {
      type: Array,
      required: true,
      default: () => []
    },
    // 传入的表单数据（仅用于读取）
    formData: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  methods: {
    // 1. 获取参数标签（包含名称和单位）
    getParamLabel(param) {
      return param.unit ? `${param.paramName}(${param.unit})` : param.paramName;
    },

    // 2. 匹配对应的 ElementUI 组件
    getElComponent(dataType, paramType) {
      if (paramType === 'calculation') return 'el-input'; // 计算参数用输入框展示
      switch (dataType) {
        case 'text': return 'el-input';
        case 'number': return 'el-input-number';
        case 'select': return 'el-select';
        case 'date': return 'el-date-picker';
        case 'textarea': return 'el-input';
        default: return 'el-input';
      }
    },

    // 3. 组件属性配置
    getComponentProps(param) {
      const baseProps = {
        placeholder: param.isRequired ? '必填项' : '选填项',
        clearable: param.dataType !== 'select' && param.dataType !== 'date'
      };

      switch (param.dataType) {
        case 'number':
          return {
            ...baseProps,
            min: param.min ?? 0,
            step: param.step ?? 0.1,
            precision: param.precision ?? 1
          };
        case 'date':
          return {
            ...baseProps,
            type: 'date',
            format: 'yyyy-MM-dd',
          };
        case 'textarea':
          return {
            ...baseProps,
            type: 'textarea',
            rows: param.rows ?? 3
          };
        default:
          return baseProps;
      }
    },

    // 4. 表单验证规则
    getParamRules(param) {
      const rules = [];
      if (param.isRequired) {
        rules.push({
          required: true,
          message: `${param.paramName}为必填项`,
          trigger: param.dataType === 'date' ? 'change' : 'blur'
        });
      }
      if (param.dataType === 'number') {
        rules.push({
          validator: (rule, value, callback) => {
            if (value === '' || value === undefined || value === null) {
              callback();
            } else if (isNaN(Number(value))) {
              callback(new Error(`${param.paramName}需输入数字`));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        });
      }
      return rules;
    },

    // 5. 处理输入事件（输入框、数字框等）
    handleInput(param, value) {
      if (param.paramType === 'base') {
        this.notifyParentUpdate(param, value);
      }
    },

    // 6. 处理变更事件（选择框、日期框等）
    handleChange(param, value) {
      if (param.paramType === 'base') {
        this.notifyParentUpdate(param, value);
      }
    },

    // 7. 通知父组件更新数据（核心：不直接修改 props）
    notifyParentUpdate(param, value) {
      // 针对数字类型做特殊处理（避免空字符串被转为 0）
      const finalValue = param.dataType === 'number' && (value === '' || value === null)
        ? ''
        : value;

      this.$emit('update:formData', {
        ...this.formData,
        [param.paramCode]: finalValue
      });
      this.$emit('baseParamChange', param);
    }
  }
};
</script>

<style scoped>
.single-param-item {
  margin-bottom: 12px;
}
.calc-param-tip {
  margin-left: 8px;
  color: #409eff;
  cursor: help;
  font-size: 14px;
}
</style>